<template>
	<common-view ref="commonView" :SearchSet="searchSet" :SearchForm="searchForm" :SearchData="searchData" :TableSet="tableSet" :Columns="columns" :DialogSet="dialogSet" :DialogFormData="dialogFormData" :DialogForm="dialogForm" :RequestController="requestController" :DataList="dataList" @handleQueryCallBack="handleQueryCallBack" @OpenDialogCallBack="OpenDialogCallBack" @addCallBack="addCallBack" @updateCallBack="updateCallBack" @deleteCallBack="deleteCallBack"></common-view>
</template>
<script>
import CommonView from "@/components/common/CommonView.vue";
import { isInteger } from "@/utils/validate";

export default {
	components: {
		CommonView,
	},
	data() {
		return {
			//页面组件配置
			//===================================================//
			//搜索框按钮
			//搜索框及搜索按钮是否展示
			searchSet: {
				searchButtenShow: true,
			},
			//搜索框配置及数据
			searchData: {
				m_name: "",
			},
			searchForm: [
				{
					type: "Input",
					label: "菜单名称",
					prop: "m_name",
					width: "200px",
					size: "small",
					placeholder: "请输入菜单名称...",
					enternative: this.handleQuery, //按下enter执行的函数
				},
			],
			//表格相关配置
			tableSet: {
				selection: true, //是否显示多选框
				showKey: true, //显示索引列
				idColum: "m_id", //（id）主键列名称
			},
			//表格表头数据
			//Object.freeze 百度去理解 提升性能并且禁止对于该对象的属性进行修改（
			columns: Object.freeze([
				{
					sortable: true,
					attrs: {
						prop: "m_name",
						label: "菜单名称",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					//排序 若做了分页sortable:"custom"
					sortable: true,
					attrs: {
						prop: "m_sequence",
						label: "菜单顺序",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "m_icon",
						label: "菜单图标资源",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "m_url",
						label: "菜单地址url",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					sortable: true,
					attrs: {
						prop: "m_buttens",
						label: "菜单页面对应按钮权限",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
				{
					hidden: false,
					attrs: {
						prop: "m_state",
						label: "状态",
						// width: "140",
						align: "center",
						// "show-overflow-tooltip": true,
					},
				},
			]),
			//新增编辑弹出框相关配置
			dialogSet: {
				title: "菜单信息",
				isEdit: false,
				dialogVisible: false,
			},
			//新增编辑相关信息
			dialogFormData: {
				m_name: "",
				m_sequence: "",
				m_icon: "",
				m_url: "",
				m_buttens: "",
				m_state: "",
        m_cache:1,
			},
			//新增编辑form
			dialogForm: {
				labelWidth: "100px",
				inline: false,
				labelPosition: "right",
				size: "small",
				formItem: [
					{
						type: "text",
						label: "菜单名称",
						width: "200px",
						prop: "m_name",
						size: "small",
						isDisabled: false,
						rules: [
							{ required: true, message: "请输入菜单名称", trigger: "blur" },
							{
								min: 1,
								max: 50,
								message: "长度在 1 到 50 个字符",
								trigger: "blur",
							},
						],
					},
					{
						type: "cascader",
						label: "父级菜单",
						width: "200px",
						prop: "m_parent_id",
						size: "small",
						isDisabled: false,
						multiple: false,
						placeholder: "请选择",
						tip: "",
						value: "",
						props: { checkStrictly: true, emitPath: false }, //设置单选多选模式等
						options: [],
						required: true,
					},
					{
						type: "text",
						label: "排序",
						width: "200px",
						prop: "m_sequence",
						size: "small",
						isDisabled: false,
						rules: [{ trigger: "blur", validator: isInteger }],
					},
					{
						type: "text",
						label: "菜单图标",
						width: "200px",
						prop: "m_icon",
						size: "small",
						isDisabled: false,
						rules: [],
					},
					{
						type: "text",
						label: "菜单地址",
						width: "200px",
						prop: "m_url",
						size: "small",
						isDisabled: false,
						rules: [
							{ required: true, message: "请输入菜单地址", trigger: "blur" },
							{
								min: 1,
								max: 50,
								message: "长度在 1 到 50 个字符",
								trigger: "blur",
							},
						],
					},
					{
						type: "text",
						label: "菜单按钮权限",
						width: "200px",
						prop: "m_buttens",
						size: "small",
						isDisabled: false,
						rules: [],
					},
					{
						type: "select",
						label: "缓存页面",
						width: "200px",
						prop: "m_cache",
						size: "small",
						isDisabled: false,
						multiple: false,
						tip: "",
						value: "",
						options: [
							{ value: 1, label: "缓存" },
							{ value: 0, label: "不缓存" },
						],
						required: true,
					},
					{
						type: "select",
						label: "菜单状态",
						width: "200px",
						prop: "m_state",
						size: "small",
						isDisabled: false,
						multiple: false,
						tip: "",
						value: "",
						options: [
							{ value: -1, label: "删除" },
							{ value: 0, label: "禁用" },
							{ value: 1, label: "启用" },
						],
						required: true,
					},
				],
			},
			dataList: [],
			// downloadLoading: false,
			// total: 0,
			// u_states: [],

			//页面逻辑参数等
			//=======================================================//
			//选中的行
			requestController: "menu",
			menuOptions: [],
		};
	},
	mounted: function () { },
	methods: {
		handleQuery() {
			this.$refs.commonView.handleQuery();
		},
		getMenuListSelect() {
			this.baseRequest.Post("MenuGroup/SelectTree", {}).then((res) => {
				this.dialogForm.formItem[1].options = res.bodyList;
				this.loadingTable = false;
			});
		},
		//修正返回表格list数据(访问list返回成功回调)
		handleQueryCallBack(res) {
			this.dataList = res.bodyList;
			this.menuOptions = [];
			this.changeTree(this.dataList);
			this.$refs["commonView"].total = this.dataList.length;
		},
		changeTree(tree) {
			tree.forEach((temp) => {
				if (temp.m_state === 1) {
					temp.m_state = "启用";
				}
				if (temp.m_state === 0) {
					temp.m_state = "禁用";
				}
				if (temp.m_state === -1) {
					temp.m_state = "删除";
				}
				var options = {};
				options.value = temp.m_id;
				options.label = temp.m_name;
				options.children = [];
				if (temp.children.length > 0) {
					this.menuOptions.push(options);
					temp.children.forEach((item) => {
						options.children.push({
							value: item.m_id,
							label: item.m_name,
						});
					});

					this.changeTree(temp.children);
				} else {
					options.value = temp.m_id;
					options.label = temp.m_name;
					this.menuOptions.push(options);
					delete options.children;
				}
			});
		},
		//打开编辑框回调
		OpenDialogCallBack(update, rows) {
			if (update == true) {
				this.dialogForm.formItem[1].isDisabled = true;
			} else {
				this.dialogForm.formItem[1].isDisabled = false;
			}
			this.getMenuListSelect();
		},
		///新增回调
		addCallBack(res) { },
		//更新回调
		updateCallBack(res) { },
		//删除回调
		deleteCallBack(res) { },
		Export() {
			this.downloadLoading = true;
			// this.downloadLoading=false;
		},
	},
};
</script>
<style lang="scss">
// .el-form-item {
//   margin-bottom: 0px;
// }
</style>
